<template>
    <h3 style="margin: 10px 20px 0;">销售统计</h3>
    <div class="search-box">
        <el-form :model="searchInfo" label-position="top">
            <div class="flex-container">
                <el-form-item label="客户名称" style="width: calc(20% - 4px); min-width: 150px;">
                    <el-input 
                        v-model="searchInfo.clientName"
                        @input="handleSearch"
                    >
                        <template #prefix>
                            <el-icon><search /></el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item label="下单日期" style="width: calc(20% - 4px); min-width: 150px;">
                    <el-date-picker
                        style="width: 100%;"
                        v-model="searchInfo.orderDt"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        size="default"
                        value-format="YYYY-MM-DD"
                        @change="handleDateSearch"
                    />
                </el-form-item>
            </div>
        </el-form>
    </div>
    <div class="gird-container">
        <div class="grid-item item-1">
            <div class="item-title">销售总金额</div>
            <div class="item-content">
                <div class="inner-content">
                    <span class="text-val">{{ data.totalAmount }}</span>
                    <span class="text-unit">元</span>
                </div>
            </div>
        </div>
        <div class="grid-item item-2">
            <div class="item-title">下单客户数</div>
            <div class="item-content">
                <div class="inner-content">
                    <span class="text-val">{{ data.clientNum }}</span>
                    <span class="text-unit">家</span>
                </div>
            </div>
        </div>
        <div class="grid-item item-3">
            <div class="item-title">销售金额趋势</div>
            <svg width="100%" height="calc(100% - 45px)" style="padding:0 5px;" viewBox="0 0 800 350">
                <g transform="translate(60,20)">
                    <g class="yaxis" text-anchor="end">
                        <path d="M0,0 L0,302" stroke="black" stroke-width="3"></path>
                        <g class="tick" :transform="`translate(-5,${index * 60})`" v-for="(item, index) in yaxisData">
                            <text fill="currentColor" y="8" style="font-size: 16px;">
                                {{ item }}
                            </text>
                        </g>
                    </g>
                    <g class="xaxis" transform="translate(0,300)">
                        <path d="M-1,0 L730,0" stroke="black" stroke-width="4"></path>
                        <g class="tick" :transform="`translate(${50+index*120},0)`" v-for="(item, index) in data.amountTrend">
                            <text fill="currentColor" y="20" style="font-size: 16px;">
                                {{ item.month }}
                            </text>
                        </g>
                    </g>
                    <g class="circle-group" transform="translate(80,0)">
                        <polyline :points="amountPath.join(' ')" fill="none" stroke="black" stroke-width="2" />
                        <circle 
                            v-for="(item, index) in amountPath" 
                            r="3" :cx="item.split(',')[0]" :cy="item.split(',')[1]" pointer-events="all" 
                            style="stroke: rgb(221, 69, 40); fill: rgb(221, 69, 40);"
                        ></circle>
                    </g>
                    <g class="line-group" transform="translate(80,0)"></g>
                </g>
            </svg>
        </div>
        <div class="grid-item item-4">
            <div class="item-title">销售订单完成数量</div>
            <div class="item-content">
                <div class="inner-content">
                    <span class="text-val">{{ data.compltOrdNum }}</span>
                    <span class="text-unit">单</span>
                </div>
            </div>
        </div>
    </div>
    <div class="table-box">
        <el-tabs type="border-card">
            <el-tab-pane label="商品信息统计" style="height: 100%;">
                <skuTable ref="skuTableRef" />
            </el-tab-pane>
            <el-tab-pane label="客户信息统计" style="height: 100%;">
                <clientTable ref="clientTableRef" :clientName="searchInfo.clientName" />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script setup lang="ts">
import { ref, watchEffect, h } from 'vue'
import { getStatisticSku, getStatisticSummary } from '@/pages/home/views/sale/api/statistic'
import skuTable from '@/pages/home/views/sale/statistic/components/skuTable.vue'
import clientTable from '@/pages/home/views/sale/statistic/components/clientTable.vue'

const data = ref({
    totalAmount: null,
    clientNum: null,
    compltOrdNum: null,
    amountTrend: []
})
const yaxisData = ref([])
const amountPath = ref([])
const skuTableRef = ref()
const clientTableRef = ref()
const searchInfo = ref({
    clientName: "",
    orderDt: ["", ""]
})

const handleSearch = debounce(async () => {
  await clientTableRef.value.getClientTableData()
}, 500)

const handleDateSearch = debounce(async (val) => {
    skuTableRef.value.getSkuTableData(searchInfo.value.orderDt)
    clientTableRef.value.getClientTableData(searchInfo.value.orderDt)
}, 300)

const getStatisticData = async () => {
  const summary = await getStatisticSummary({ queryTime: "" })
  data.value.totalAmount = summary.data.data.totalAmount
  data.value.clientNum = summary.data.data.clientNum
  data.value.compltOrdNum = summary.data.data.compltOrdNum
  data.value.amountTrend = summary.data.data.amountTrend

  skuTableRef.value.getSkuTableData()
  clientTableRef.value.getClientTableData()
}
getStatisticData()

function debounce (func, wait) {
    let timeout;
    return function executedFunction(...args) {
        const context = this
        const later = () => {
            func.apply(context, args)
        };
        clearTimeout(timeout)
        timeout = setTimeout(later, wait)
    };
}

watchEffect(() => {
    const maxAmount = Math.max(...data.value.amountTrend.map(item => item.monthAmount))
    const orderOfMagnitude = Math.pow(10, Math.floor(Math.log10(maxAmount)))
    const maxYaxis = Math.ceil(maxAmount / orderOfMagnitude) * orderOfMagnitude;
    yaxisData.value = [5, 4, 3, 2, 1].map((n) => (n / 5) * maxYaxis)
    amountPath.value = data.value.amountTrend.map((item, index) => {
        return index * 120 + "," + (1 - item.monthAmount / maxYaxis) * 300
    })
})
</script>
<style scoped>
.search-box {
  margin: 10px 20px;
}
.el-form-item {
  margin-bottom: 0;
}
.flex-container {
  display: flex;
  flex-flow: row wrap;
  gap: 10px;
  align-items: flex-end;
}
.gird-container {
    padding: 0 20px 10px;
    height: 250px;
    /* background: #eee; */
    display: grid;
    grid-template-columns: 1fr 1fr 3fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
}
.grid-item {
    background: #fff;
    border: 1px solid var(--el-border-color-dark);
    border-radius: 4px 4px 0 0;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 3px;
    min-width: 150px;
}
.item-1 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 3;
}
.item-2 {
    border-radius: 4px 4px 0 0;
}
.item-3 {
    min-width: 280px;
    min-height: 230px;
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 3;
}
.item-4 {
    border-radius: 0;
}
.item-title {
    width: 100%;
    height: 40px;
    text-align: center;
    padding: 5px;
    font-weight: 500;
}
.item-content {
    height: calc(100% - 40px);
    padding: 0 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.inner-content {
    max-width: 100%;
    display: flex;
    align-items: baseline;
}
.text-val {
    font-size: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.text-unit {
    font-size: 12px;
    padding-left: 5px;
}
.search-list {
    border: 1px solid #e1e3e5;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    margin: 0 20px;
    padding: 6px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.table-box{
    flex: 1;
    /* max-height: 600px; */
    /* height: 0; */
    margin: 0 20px 10px;
    min-width: 600px;
}
:deep(.el-tabs){
    height: 100%;
}
:deep(.el-tabs__content){
    padding: 15px 0;
}
</style>